<template>
  <div :class="{ 'm-choose-icon-dialog-body-height': isScroll }">
    <el-dialog v-model="dialogVisible" v-bind="$attrs">
    <template #default>
      <l-form
        ref="form"
        :options="options"
        label-width="100px"
        @on-change="onChange"
        @before-upload="beforeUpload"
        @on-preview="onPreview"
        @on-remove="onRemove"
        @before-remove="beforeRemove"
        @on-success="onSuccess"
        @on-exceed="onExceed"
      >
        <template #uploadArea>
          <slot name="uploadArea"></slot>
        </template>
        <template #uploadTip>
          <slot name="uploadTip"></slot>
        </template>
      </l-form>
    </template>
    <template #footer>
      <slot name="footer" :form="form"></slot>
    </template>
  </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { PropType, ref, watch } from "vue";
import { FormOptions, FormInstance } from "../../form/src/types/type";
let props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  //表单配置项
  options: {
    type: Array as PropType<FormOptions[]>,
    required: true,
  },
  onChange: {
    type: Function
  },
  beforeUpload: {
    type: Function
  },
  onPreview: {
    type: Function
  },
  onRemove: {
    type: Function
  },
  beforeRemove: {
    type: Function
  },
  onSuccess: {
    type: Function
  },
  onExceed: {
    type: Function
  },
   // 是否只在可视区域内滚动
   isScroll: {
    type: Boolean,
    default: false
  },
});

let form = ref<FormInstance | null>();

let emits = defineEmits(["update:visible"]);

let dialogVisible = ref<boolean>(props.visible);

watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val;
  }
);

watch(
  () => dialogVisible.value,
  (val) => {
    emits("update:visible", val);
  }
);
</script>

<style scoped></style>
